<template>
	<view class="container">
		<view class="btn" @tap="pay">
			支付
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	import {
		$http
	} from "@/common"
	const pay = ()=>{
		uni.showToast({
			title:'准备支付'
		})
		$http.get('userGear').then(result => {
			console.log(result, 'result')
			$http.post('userRecharge', {
				gearId: result[0].id
			}).then(result => {
				console.log(result.pay)
				wx.requestPayment({
					timeStamp: result.pay.timeStamp,
					nonceStr: result.pay.nonceStr,
					package: result.pay.package,
					signType: result.pay.signType,
					paySign: result.pay.paySign,
					success(res) {
						console.log(res)
						if (res.errMsg == "requestPayment:ok") {
							uni.showToast({
								title:'支付成功'
							})
							console.log('支付成功', res)
						} else {
							uni.showToast({
								title:'支付失败'
							})
							console.log('支付失败')
						}
					},
					fail(res) {
						uni.showToast({
							title:'支付失败了'
						})
					}
				})
			})
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #F9F9F9;
		padding-top: 200rpx;
	
		.btn {
			width: 120rpx;
			height: 60rpx;
			border-radius: 10rpx;
			line-height: 60rpx;
			text-align: center;
			background: #3f77f4;
			color: #fff;
			margin: 0rpx auto;
		}
	}
</style>